<script setup lang="ts">
import {
  AliwangwangOutlined,
  CopyOutlined,
  LinkOutlined,
} from '@ant-design/icons-vue';

import { errimage } from '#/base';
import { copyToClipboard, gotoAliiwanwan } from '#/utils';

defineProps<{
  itemData?: any;
}>();
// function getIsMIwenStatus(list: any) {
//   const miwentag = 'douyin';
//   return list?.includes(miwentag)
//     ? {
//         color: 'green',
//         text: '已绑定',
//         ic: CheckCircleOutlined,
//       }
//     : {
//         color: 'red',
//         text: '未绑定',
//         ic: CloseCircleOutlined,
//       };
// }
// const VIconNode = defineComponent({
//   props: {
//     vnodes: {
//       type: Object,
//       required: true,
//     },
//   },
//   render() {
//     return h(this.vnodes, {});
//   },
// });
// function VIconNode() {
//   return h(AliwangwangOutlined, {});
// }
</script>

<template>
  <div>
    <div
      v-if="itemData.bindGoods1688List && itemData.bindGoods1688List.length > 0"
    >
      <a-space :size="10" direction="vertical">
        <a-space
          v-for="item in itemData.bindGoods1688List"
          :key="item.offerId"
          align="start"
        >
          <a-image
            :fallback="errimage"
            :src="item.mainPic"
            :width="60"
            style="border-radius: 8px"
          />
          <a-space :size="0" direction="vertical">
            <a-space>
              <a-tooltip :title="item.goodsName">
                <div class="w-64 truncate">
                  {{ item.goodsName }}
                </div>
              </a-tooltip>
              <a-button
                shape="round"
                size="small"
                type="link"
                @click="
                  () => {
                    copyToClipboard(item.goodsName);
                  }
                "
              >
                <template #icon>
                  <CopyOutlined class="text-xs" />
                </template>
              </a-button>
            </a-space>

            <a-space>
              <div class="text-xs text-gray-500">
                供货商: {{ item.wangwangAccount }}
              </div>
              <a-button
                shape="round"
                size="small"
                type="link"
                @click="
                  () => {
                    gotoAliiwanwan(item.wangwangAccount);
                  }
                "
              >
                <template #icon>
                  <AliwangwangOutlined />
                </template>
              </a-button>
            </a-space>
            <a-space class="text-xs text-gray-500">
              <div>价格: ¥{{ item.referencePrice }}</div>
              <is-miwen :list="item.supportChannelsList" />
              <!-- <a-tag :color="getIsMIwenStatus(item.supportChannelsList).color">
                <VIconNode
                  :vnodes="getIsMIwenStatus(item.supportChannelsList).ic"
                />
                密文
              </a-tag> -->
              <div>
                <a-tooltip
                  :title="`https://detail.1688.com/offer/${item.offerId}.html`"
                >
                  <a
                    :href="`https://detail.1688.com/offer/${item.offerId}.html`"
                    target="_blank"
                  >
                    <LinkOutlined />货源链接
                  </a>
                </a-tooltip>

                <a-button
                  shape="round"
                  size="small"
                  type="link"
                  @click="
                    () => {
                      copyToClipboard(
                        `https://detail.1688.com/offer/${item.offerId}.html`,
                      );
                    }
                  "
                >
                  <template #icon>
                    <CopyOutlined class="text-xs" />
                  </template>
                </a-button>
              </div>
            </a-space>
          </a-space>
        </a-space>
      </a-space>
    </div>
    <div v-else>
      <nohuoyuan :record="itemData" />
    </div>
  </div>
</template>
